<template>
  <basic-container>
    <avue-crud
      :option="option"
      :table-loading="loading"
      :data="data"
      ref="crud"
      v-model="form"
      :page.sync="page"
      :permission="permissionList"
      @row-del="rowDel"
      @row-save="rowSave"
      @row-update="rowUpdate"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="props" slot="imgUrl">
        <el-image
          style="width: 166px; height: 66px"
          :src="props.row.imgUrl"
          @click="$ImagePreview([{ url: props.row.imgUrl }], 0, {})"
          fit="fit"
        ></el-image>
      </template>
      <template slot-scope="props" slot="detailUrl">
        <el-image
          style="width: 166px; height: 66px"
          :src="props.row.detailUrl"
          @click="$ImagePreview([{ url: props.row.detailUrl }], 0, {})"
          fit="fit"
        ></el-image>
      </template>
      <template slot-scope="props" slot="bgImgUrl">
        <el-image
          style="width: 166px; height: 66px"
          :src="props.row.bgImgUrl"
          @click="$ImagePreview([{ url: props.row.bgImgUrl }], 0, {})"
          fit="fit"
        ></el-image>
      </template>
      <template slot-scope="props" slot="imgUrlForm">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="http"
          :before-upload="beforeCoverUpload"
        >
          <img v-if="props.row.imgUrl" :src="props.row.imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </template>
      <template slot-scope="props" slot="detailUrlForm">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="http"
          :before-upload="beforeDetailUpload"
        >
          <img
            v-if="props.row.detailUrl"
            :src="props.row.detailUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </template>
      <template slot-scope="props" slot="bgImgUrlForm">
        <el-upload
          class="avatar-uploader"
          :show-file-list="false"
          action="http"
          :before-upload="beforeBgImgUrlUpload"
        >
          <img
            v-if="props.row.bgImgUrl"
            :src="props.row.bgImgUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </template>
    </avue-crud>
  </basic-container>
</template>

<script>
import { getList, add, update, remove } from "@/api/app/banner";
import { mapGetters } from "vuex";
import tencentCos from "@/mixins/tencent-cos.js";
export default {
  mixins: [tencentCos],

  data() {
    return {
      form: {},
      selectionList: [],
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      option: {
        height: "auto",
        calcHeight: 210,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        selection: false,
        viewBtn: true,
        emptyBtn: true,
        dialogClickModal: false,
        column: [
          {
            label: "标题",
            prop: "title",
            width: 120,
            search: false,
            rules: [
              {
                required: true,
                message: "请输入标题",
                trigger: "blur",
              },
            ],
          },
          {
            label: "图片",
            prop: "imgUrl",
            formslot: true,
            width: 200,
            rules: [
              {
                required: true,
                message: "请上传图片",
                trigger: "change",
              },
            ],
          },
          {
            label: "应用名称",
            prop: "appCode",
            type: "select",
            width: 120,
            search: false,
            dicUrl: "applet/data/app/code/list",
            // dicData: [
            //   {
            //     id: "emoticon_applet_wx",
            //     name: "微信表情包小程序",
            //   },
            //   {
            //     id: "scenario_applet_wx",
            //     name: "微信话术小程序",
            //   },
            //   {
            //     id: "avatar_applet_wx",
            //     name: "微信头像小程序",
            //   },
            // ],
            props: {
              label: "name",
              value: "code",
            },
            rules: [
              {
                required: true,
                message: "请选择应用名称",
                trigger: "change",
              },
            ],
          },
          {
            label: "位置",
            prop: "positionCode",
            search: false,
            type: "select",
            dicData: [
              {
                id: "index_page",
                name: "首页",
              },
              {
                id: "case_page",
                name: "私人",
              },
            ],
            props: {
              label: "name",
              value: "id",
            },
            rules: [
              {
                required: true,
                message: "请选择位置",
                trigger: "change",
              },
            ],
          },
          {
            label: "行为",
            prop: "jumpType",
            search: false,
            type: "select",
            dicData: [
              {
                id: 0,
                name: "不跳转",
              },
              {
                id: 1,
                name: "跳转应用内页面",
              },
              {
                id: 2,
                name: "跳转应用内页面（switchtab）",
              },
              {
                id: 3,
                name: "跳转小程序",
              },
              {
                id: 4,
                name: "跳转图片详情页",
              },
              {
                id: 5,
                name: "外部第三方页面",
              },
            ],

            props: {
              label: "name",
              value: "id",
            },
            rules: [
              {
                required: true,
                message: "请选择行为",
                trigger: "change",
              },
            ],
          },
          {
            label: "小程序appid",
            prop: "jumpAppid",
            width: 150,
            search: false,
            rules: [
              {
                required: true,
                message: "请输入小程序appid",
                trigger: "blur",
              },
            ],
          },
          {
            label: "路由地址",
            prop: "jumpRoute",
            placeholder: "类似 pages/home/home",
            search: false,
            display: false,
            width: 200,
            rules: [
              {
                required: true,
                message: "请输入路由地址",
                trigger: "blur",
              },
            ],
          },

          {
            label: "详情图片地址",
            prop: "detailUrl",
            display: false,
            width: 250,
            search: false,
            rules: [
              {
                required: true,
                message: "请输入详情图片地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "背景图片地址",
            prop: "bgImgUrl",
            width: 250,
            search: false,
            rules: [
              {
                required: false,
                message: "请输入背景图片地址",
                trigger: "blur",
              },
            ],
          },
          {
            label: "排序",
            prop: "sort",
            rules: [
              {
                required: true,
                message: "请输入排序",
                trigger: "blur",
              },
            ],
          },
        ],
      },
      data: [],
      categoryId: "body",
      typeDictList: [],
    };
  },
  watch: {
    "form.jumpType": {
      handler(val) {
        let jumpAppid = this.findObject(this.option.column, "jumpAppid");
        let detailUrl = this.findObject(this.option.column, "detailUrl");
        let jumpRoute = this.findObject(this.option.column, "jumpRoute");
        switch (val) {
          case 0:
            jumpAppid.display = false;
            detailUrl.display = false;
            jumpRoute.display = false;
            this.form.jumpRoute = "";
            this.form.detailUrl = "";
            this.form.jumpAppid = "";
            break;
          case 1:
          case 2:
          case 3:
            jumpAppid.display = false;
            detailUrl.display = false;
            jumpRoute.display = true;
            jumpRoute.rules = [
              {
                required: true,
                message: "请输入路由地址",
                trigger: "blur",
              },
            ];
            jumpRoute.placeholder = "类似 pages/home/home";
            this.form.detailUrl = "";
            this.form.jumpAppid = "";
            if (val == 3) {
              jumpAppid.display = true;
              jumpAppid.rules = [
                {
                  required: true,
                  message: "请输入小程序appid",
                  trigger: "blur",
                },
              ];
            }
            break;
          case 4:
            jumpAppid.display = false;
            detailUrl.display = true;
            detailUrl.rules = [
              {
                required: true,
                message: "请输入详情图片地址",
                trigger: "blur",
              },
            ];
            jumpRoute.display = false;
            this.form.jumpRoute = "";
            this.form.jumpAppid = "";
            break;
          case 5:
            jumpAppid.display = false;
            detailUrl.display = false;
            jumpRoute.display = true;
            jumpRoute.placeholder = "类似 http://www.baidu.com";
            this.form.detailUrl = "";
            this.form.jumpAppid = "";
            jumpRoute.rules = [
              {
                required: true,
                message: "请输入路由地址",
                trigger: "blur",
              },
            ];
            break;
          default:
            jumpAppid.display = false;
            detailUrl.display = false;
            jumpRoute.display = false;
            this.form.jumpRoute = "";
            this.form.detailUrl = "";
            break;
        }
      },
      immediate: true,
    },
  },
  computed: {
    ...mapGetters(["userInfo", "permission"]),
    permissionList() {
      return {
        addBtn: true,
        viewBtn: false,
        delBtn: true,
        editBtn: true,
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach((ele) => {
        ids.push(ele.id);
      });
      return ids.join(",");
    },
  },
  async mounted() {},
  methods: {
    async beforeCoverUpload(file) {
      let url = await this.cosUpload(file, "banner");
      this.$set(this.form, "imgUrl", url);
    },
    async beforeDetailUpload(file) {
      let url = await this.cosUpload(file, "banner");
      this.$set(this.form, "detailUrl", url);
    },
    async beforeBgImgUrlUpload(file) {
      let url = await this.cosUpload(file, "banner");
      this.$set(this.form, "bgImgUrl", url);
    },
    rowSave(row, done, loading) {
      add(row).then(
        () => {
          done();
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },
    rowUpdate(row, index, done, loading) {
      update(row).then(
        () => {
          done();
          this.onLoad(this.page, { categoryId: this.categoryId });
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        },
        (error) => {
          window.console.log(error);
          loading();
        }
      );
    },

    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return remove(row.id);
        })
        .then(() => {
          this.onLoad(this.page, { categoryId: this.categoryId });
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        });
    },
    searchReset() {
      this.query = {};
      this.page.currentPage = 1;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },

    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    async onLoad(page, params = {}) {
      this.loading = true;
      params = Object.assign({}, params, {
        pageNum: page.currentPage,
        pageSize: page.pageSize,
      });
      getList(Object.assign(params, this.query)).then((res) => {
        const data = res.data.data;
        this.data = data.records;
        this.page.total = data.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style></style>
